import {
  AntOutline,
  UserSetOutline,
  EnvironmentOutline,
  TruckOutline,
} from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import { Flex } from "antd-mobile";
export default function Tabs(props) {
  const navigate = useNavigate();
  const tabs = [
    {
      icon: <AntOutline fontSize={24} color="#1e80ff" />,
      text: "整租",
      path: "",
    },
    {
      icon: <UserSetOutline fontSize={24} color="#1e80ff" />,
      text: "合租",
      path: "",
    },
    {
      icon: <EnvironmentOutline fontSize={24} color="#1e80ff" />,
      text: "地图找房",
      path: "/home/cityList",
    },
    {
      icon: <TruckOutline fontSize={24} color="#1e80ff" />,
      text: "发布房源",
      path: "",
    },
  ];
  return (
    <div className="tabs" style={{ width: "100%", marginTop: "22px" }}>
      <Flex direction="row" align="center">
        {tabs.map((res, index) => {
          return (
            <Flex.Item key={index}>
              <Flex
                direction="column"
                alignContent="center"
                onClick={() => {
                  navigate(res.path);
                }}
              >
                <Flex.Item align="center" style={{ width: "40px" }}>
                  {res.icon}
                </Flex.Item>
                <Flex.Item style={{ marginTop: "12px", fontSize: "14px" }}>
                  {res.text}
                </Flex.Item>
              </Flex>
            </Flex.Item>
          );
        })}
      </Flex>
    </div>
  );
}
